<template>
	<div class="view">
		<draggable 
			v-model="data.data" 
			@update="dataDragEnd" 
			:options="{animation: 300, disabled: !data.sortable}">
			<transition-group class="items-view">
				<div v-for="(item, index) in data.data" 
					:key="index" 
					class="item"
					:class="{'item-sortable': data.sortable}">
					{{item.label}}
				</div>
			</transition-group>
		</draggable>
	</div>
</template>

<script>
	import draggable from 'vuedraggable';
	
	export default {
		props: ['data'],
		data() {
			return {
			}
		},
		methods: {
			getData(evt) {
				console.log(evt.draggedContext.element.id)
			},
			dataDragEnd(evt) {
				console.log('拖动前的索引 :' + evt.oldIndex)
				console.log('拖动后的索引 :' + evt.newIndex)
				console.log(this.mData)
			}
		},
		components:{
			draggable
		}
	}
</script>

<style scoped="scoped">
	.items-view {
		display: flex;
		display: -webkit-flex;
		display: -moz-flex;
		
	}
	
	.item {
		padding: 5px 10px;
		border-radius: 5px;
		border: 1px solid #E6E6E6;
		margin-right: 10px;
		cursor: pointer;
	}
	
	.item-sortable {
		background-color: #E6E6E6;
	}
</style>